<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="vue.js"></script>
    <style type="text/css" media="screen">
    /*从隐藏到显示*/

    .fade-enter {
        opacity: 0;
    }
    .fade-enter-to {
        opacity: 1;
    }
    .fade-enter-active {
        transition: opacity 1s;
    }
    /*从显示到隐藏*/

    .fade-leave {
        opacity: 1;
    }
    .fade-leave-to {
        opacity: 0;
    }
    .fade-leave-active {
        transition: opacity 1s;
    }
    </style>
</head>

<body>
    <!-- 
       1: 注意在v-if v-else v-for中一定要个dom加上唯一的key值，以防vue复用dom产生bug
        2:动画dom外一定要加上transition标签
     -->
    <div id="root">
        <transition name="fade" mode="in-out">
            <!-- <div v-if="show" key="div1">hello world</div>
<div v-else key="div2">bye world</div> -->
            <component :is="show"></component>
        </transition>
        <button class="btnhandel" @click="handclick">切换</button>
    </div>
    <script type="text/javascript">
    Vue.component("child-one", {
        template: "<div>child-one</div>"
    })
    Vue.component("child-two", {
        template: "<div>child-two</div>"
    })
    var vm = new Vue({
        el: "#root",
        data: {
            show: "child-one",
        },
        methods: {
            handclick: function() {
                this.show = this.show === "child-one" ? "child-two" : "child-one";
            }
        }
    })
    </script>
</body>

</html>